<template>
  <el-header style="text-align: left; font-size: 12px">
    <i class="el-icon-setting" style="margin-right: 15px"></i>

    <el-select v-show="this.$store.state.toggleHead==='DB'" v-model="$store.state.selectDBName" filterable
               placeholder="选择数据库">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          @click="handlerChange(item.value)"
      >
      </el-option>
    </el-select>

    <el-select v-show="this.$store.state.toggleHead ==='users'" v-model="$store.state.selectedUser" filterable
               placeholder="选择用户">
      <el-option
          v-for="item in usersOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          @click="handlerUserChange(item.value)"
      >
      </el-option>
    </el-select>
    <el-select v-show="this.$store.state.toggleHead ==='eventNames'" v-model="$store.state.selectedEvent" filterable
               placeholder="选择文件">
      <el-option
          v-for="(item,index) in filesOptions"
          :key="index"
          :label="item"
          :value="item"
          @click="handlerEventChange(item)"
      >
      </el-option>
    </el-select>
    <div style="display: inline-block;margin-left: 150px;font-size: 20px;">
      刷新倒计时:
      {{ timeCount }}
    </div>
    <div style="display: inline-block;float: right" v-show="stopFlag" >
      <el-button type="info" plain @click="clear" >暂停</el-button>
    </div>

    <div style="display: inline-block;float: right" v-show="!stopFlag" >
      <el-button type="info" plain @click="dataRefresh">开始</el-button>
    </div>
  </el-header>
</template>

<script>


import {useRoute} from 'vue-router';
import {useStore} from 'vuex';
import {computed, ref, watch,onMounted} from "vue";
import ajax from "../http";
import {ElMessage} from 'element-plus';

export default {
  name: "HeadTabBar",
  setup() {
    const route = useRoute();
    //倒计时,可修改time的值，控制实时刷新的间隔时间
    const time = 60;

    let timeCount = ref(1);
    watch(timeCount, (value) => {
      if (value <= 0) {
        getAll();
      }
    });
    const store = useStore();
    //单选框,数据库标签集合
    const options = computed(() => store.state.DNameArr);
    //选中数据库-计算属性
    const selectDB = computed({
      get: () => {
        return store.state.selectDBName;
      },
      set: (newVal) => {
        const path = route.fullPath;
        if (path === "/events/index" || path === '/events/digest') {
          //首页
          if (store.state.eventsDigest[newVal] != null) {
            store.state.selectDBName = newVal;
          } else {
            ElMessage({
              showClose: true,
              message: '该数据库无记录显示',
              type: 'warning',
            })
          }
          return;
        }
        if (path === "/events/TableIndexes") {
          //索引
          if (store.state.tableIndex[newVal] != null) {
            store.state.selectDBName = newVal;
          } else {
            ElMessage({
              showClose: true,
              message: '该数据库无记录显示',
              type: 'warning',
            })
          }
        }
      }
    });
    //选择的数据库标签
    var value = ref('');
    //单选框,用户连接集合
    const usersOptions = computed(() => store.state.users);
    //单选框,事件集合
    const filesOptions = computed(()=>store.state.fileNameArr);

    //查询所有方法
    function getAll() {
      ajax('/events/getAll', {}, 'get').then(resp => {
        //console.log(resp);
        //获取执行次数sql集合
        const executeList = resp.data.eventsDigest;
        //获取table表索引数据
        const tableIndex = resp.data.tableIndex;
        //获取所有数据库名
        const databaseName = resp.data.allDatabases;
        let temp = [];
        databaseName.forEach(name => {
          let option = {value: name, label: name}
          temp.push(option);
        })
        //获取用户连接
        const users = resp.data.connectionThread.usersConnectionDetail;
        let usersTemp = [];
        users.forEach(user=>{
          let label = "当前连接数:"+user.currentConnections+"-总计连接数:"+user.totalConnections+"------"+user.user
          let option = {value:user.user,label:label}
          usersTemp.push(option);
        });
        //获取事件物理IO详细
        const fileSummary = resp.data.fileSummary;
        //事件名集合
        let fileNameArr = [];
        for(let fileName in fileSummary){
          fileNameArr.push(fileName);
        }


        //数据库库名
        store.dispatch('setNameArr', temp);
        //存储sql语句数据集合
        store.dispatch('setEventsDigest', executeList);
        //存储table索引数据集合
        store.dispatch('setTableIndex', tableIndex);
        //重新加载表的数据
        store.dispatch('selectEventsDigest', store.state.selectDBName);
        //重新加载table表索引的数据
        store.dispatch('selectTableIndex', store.state.selectDBName);
        //存储用户连接集合
        store.dispatch('setUsersConnection',usersTemp);
        //存储用户连接线程的集合
        store.dispatch('setUsersThreadMap',resp.data.connectionThread);
        //重新加载线程表的数据
        store.dispatch('selectUserConnection',store.state.selectedUser);
        //存储事件名集合
        store.dispatch('setFileNameArr',fileNameArr)
        //存数事件详细
        store.commit('setFileSummary',fileSummary)
        //重置时间
        timeCount.value = time;
      });
    }

    //当多选框选中发生变化时调用方法
    function handlerChange(value) {
      store.dispatch('selectEventsDigest', value);
      store.dispatch('selectTableIndex', value);
    }
    function handlerUserChange(value){
      store.dispatch('selectUserConnection',value);
    }
    function handlerEventChange(value){
      store.dispatch('selectEventFile',value)
    }

    //定时器
    let Interval = null;
    //暂停/开始切换标志
    let stopFlag = ref(true);
    //定时器方法
    function dataRefresh(){
      //已经执行
      if(Interval != null){
        return ;
      }
      stopFlag.value = true;
      Interval = setInterval(() => {
        timeCount.value = timeCount.value - 1;
      }, 1000)
      ElMessage({
        showClose: true,
        message: '启动成功',
        center: true,
        duration:500,
      })
    }
    //暂停方法
    function clear(){
      stopFlag.value = false;
      clearInterval(Interval);
      Interval = null;
      ElMessage({
        showClose: true,
        message: '暂停成功',
        center: true,
        duration:500,
      })
    }
    onMounted(()=>{
      //开启定时器
      dataRefresh();
    })
    return {
      //数据库集合
      options,
      //选中的数据库
      value,
      //倒计时
      timeCount,
      //监控选中数据库
      handlerChange,
      //监控选择的用户
      handlerUserChange,
      //选中的数据库
      selectDB,
      //用户连接集合
      usersOptions,
      //事件名称集合
      filesOptions,
      //监控选择的事件
      handlerEventChange,
      //定时器
      Interval,
      //暂停定时器
      clear,
      //开始定时器
      dataRefresh,
      //暂停开始切换标志
      stopFlag,
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  line-height: 60px;
}
</style>